<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="base/base::head('智能机柜一体化监控平台',~{::link},~{::script},~{::style})">

    <link rel="stylesheet" th:href="${session.basePath}+'/pages/imp/home/css/home.css'"/>
    <link rel="stylesheet" th:href="${session.basePath}+'/pages/imp/icimgr/css/iciMonitor.css'"/>
    <link rel="stylesheet" th:href="${session.basePath}+'/resource/plugins/date/kalendae/build/kalendae.css'" type="text/css" charset="utf-8">
    <script type="text/javascript"  src="https://echarts.baidu.com/examples/vendors/echarts/echarts.min.js?_v_=1553896255267"></script>
    <script type="text/javascript" th:src="${session.basePath}+'/pages/imp/home/js/home.js'"></script>
    <script type="text/javascript" th:src="${session.basePath}+'/pages/imp/base/js/constant.js'"></script>
    <!--<script type="text/javascript" th:src="${session.basePath}+'/pages/emms/base/js/statusFormat.js'"></script>-->
    <script th:src="${session.basePath}+'/resource/plugins/date/kalendae/build/kalendae.standalone.js'" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" th:src="${session.basePath}+'/pages/imp/icimgr/js/iciMonitor.js'"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=W6gZuwMNkGsFylzE3SoWmdLGGHkg2dXB">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
</head>

<body style="overflow:hidden">
<div class="topBox">
    <div class="scrollBar">
    <div class="temperature eventsStatisticBox" style="margin-left:0px"><div class="eventLabel">温度</div><div class="text">300台</div></div>
    <div class="inundate eventsStatisticBox"><div class="eventLabel">水浸</div><div class="text">300台</div></div>
    <div class="outage eventsStatisticBox"><div class="eventLabel">断电</div><div class="text">300台</div></div>
    <div class="offline eventsStatisticBox"><div class="eventLabel">离线</div><div class="text">300台</div></div>
    <div class="fire eventsStatisticBox"><div class="eventLabel">火灾</div><div class="text">300台</div></div>
    <div class="device eventsStatisticBox"><div class="eventLabel">设备</div><div class="text">300台</div></div>
    </div>
</div>

<div class="leftBox">
    <div class="map" id="map">
        <!--<div id="test" style="width:100%;height:543px;" class="myMap"></div>-->
        <!--<script type="text/javascript">-->
            <!--var map = new BMap.Map("test");-->
            <!--// 创建地图实例-->
            <!--var point = new BMap.Point(116.404, 39.915);-->
            <!--// 创建点坐标-->
            <!--map.centerAndZoom(point, 15);-->
            <!--// 初始化地图，设置中心点坐标和地图级别-->
        <!--</script>-->
    </div>
    <script type="text/javascript">
        // 创建地图实例
        var map = new BMap.Map("map");
        // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom();                            //启用滚轮放大缩小地图
        map.addControl(new BMap.NavigationControl());           //添加默认缩放平移控件
        map.addControl(new BMap.ScaleControl());                //添加默认比例尺控件
        getBoundary();
        // setTimeout(function(){map.centerAndZoom("贵州", 9);},600);
        function getBoundary(){
            var bdary = new BMap.Boundary();
            var name = "贵州";
            bdary.get(name, function(rs){       //获取行政区域
                map.clearOverlays();        //清除地图覆盖物
                var count = rs.boundaries.length; //行政区域的点有多少个
                for(var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i],
                        {
                            strokeWeight: 2, //设置多边形边线线粗
                            strokeOpacity: 1, //设置多边形边线透明度0-1
                            StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
                            strokeColor: "#ff0000", //设置多边形边线颜色
                            fillColor: "#00ffff", //设置多边形填充颜色
                            fillOpacity: 0.01 //设置多边形填充颜色透明度0-1  注：标红的地放你们可以去掉看一下效果，自己体验一下
                        }); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    map.setViewport(ply.getPath());    //调整视野
                }
                map.centerAndZoom("贵州", 9);
            });
        }

    </script>
</div>
<div class="rightBox">
    <div class="eventFilterBox">
        <div class="item temperature">温度异常</div>
        <div class="itemSplit"></div>
        <div class="item inundate">水浸</div>
        <div class="item outage">断电</div>
        <div class="itemSplit"></div>
        <div class="item offline">离线</div>
        <div class="item fire">火灾</div>
        <div class="itemSplit"></div>
        <div class="item device">设备异常</div>
    </div>
    <div class="eventsList">
        <div class="tabBar">
            <div class="tab" id="tab_Warning" onClick="eventsChangeTab(this)">预警</div>
            <div class="tab" onClick="eventsChangeTab(this)">任务</div></div>
        <div class="content">
            <div class="list" id="list1">1</div>
            <div class="list" id="list2">
           <!-- <div class="item">
                <div class="msg">
                    <div class="icon"></div><div class="text">智能一体柜9号（断电警报）</div>
                </div>
                <div class="time">23分钟前</div>
                <div class="detail">查看详细</div>
            </div>-->
        </div>

        </div>
    </div>
</div>
<div style="clear:both"></div>
<div id="infoWindow1" style="display:none">
<div class="infoWindow1">
    <div><label class="key">设备编号：</label><label class="value" id="deviceNo"></label></div>
    <div><label class="key">温度：</label><label class="value" id="temperature"></label></div>
    <div><label class="key">湿度：</label><label class="value" id="humidity"></label></div>
    <div style="width:100%">
        <div id="gisDeviceDetial" style="float:right;margin-right:10px;font-size:12px;cursor:pointer;color:#6FBBED" click="alert();">详细</div>
    </div>
<!--    <div><label class="key">报警：</label><label class="value" id="warning"></label></div>-->
</div>
</div>

<div th:replace="imp/icimgr/deviceMonitorPanel::devicveMonitorPanel" ></div>

</body>
<script type="text/javascript">
    function eventsChangeTab(e) {
        var _index = $(e).index();
        $(".content").find(".list").css('z-index','1');
        $(".content").find(".list").eq(_index).css('z-index','0');
        $(".tabBar").find(".tab").css("background","none");
        $(e).css("background","#E0E0E0");
    }
</script>
</html>
